<template>
	<view class="order">
		<view class="tab dis">
			<view class="tabItem" :class="tabId == 0 ? 'avtive' : ''" @click="changeTab(0)">
				<view class="tabName">全部订单</view>
			</view>
			<view class="tabItem" :class="tabId == 1 ? 'avtive' : ''" @click="changeTab(1)">
				<view class="tabName">待付款</view>
			</view>
			<view class="tabItem" :class="tabId == 2 ? 'avtive' : ''" @click="changeTab(2)">
				<view class="tabName">退款订单</view>
			</view>
		</view>
		<view class="orderList p20" v-if="list.length > 0">
			<view class="orderItem card p20" v-for="item in list" :key="item.orderId" @click="goDetails(item)">
				<view class="itemTop dis">
					<view class="topL dis">
						<view class="state" :class="item.class1">{{ item.helpTypeContent }}</view>
						<view class="title">
							交易金额
							<text>￥{{ item.amount }}元</text>
						</view>
					</view>
					<view class="topR state0" :class="item.class2">{{ item.orderStatusContent }}</view>
				</view>
				<view class="itemCon pt15">{{ item.description }}</view>
				<view class="itemBot dis">
					<view class="but" @click.stop="goPayment(item)">立即付款</view>
				</view>
			</view>
			<view class="noData">暂无更多了</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getUserOrderList } from '@/config/api.js';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad((options) => {
	tabId.value = options.index;
});
onShow(() => {
	initList();
});

// 去付款
const goPayment = (item) => {
	console.log('付款', item);
};

// 订单详情
const goDetails = (item) => {
	uni.navigateTo({
		url: `/errand/errand/errandDetails?id=${item.id}`
	});
};

const list = ref([]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(15);
const payStatus = ref(null);
const initList = () => {
	list.value = [];
	total.value = 0;
	pageNum.value = 1;
	list.value.length;
	getList();
};
const getList = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		payStatus: tabId.value == 1 ? '0' : tabId.value == 2 ? '3' : ''
	};
	const res = await getUserOrderList(data);
	console.log(res);
	if (res.code == 0) {
		total.value = res.data.pageInfo.total;
		const newList = res.data.pageInfo.list.map((item) => {
			const itemNew = errandsItem(item);
			return itemNew;
		});
		list.value = [...list.value, ...newList];
	}
};
const errandsItem = (item) => {
	let helpTypeContent = '';
	let class1 = '';
	let orderStatusContent = '';
	let class2 = '';
	switch (item.orderType) {
		case 'bbs':
			helpTypeContent = '论坛';
			class1 = 'tab1';
			break;
		case 'run_errands':
			helpTypeContent = '跑腿';
			class1 = 'tab3';
			break;
		default:
			helpTypeContent = '';
			class1 = '';
	}
	switch (item.orderStatus) {
		case 0:
			orderStatusContent = '待付款';
			class2 = 'state0';
			break;
		case 1:
			orderStatusContent = '已付款';
			class2 = 'state2';
			break;
		case 2:
			orderStatusContent = '已取消';
			class2 = 'state3';
			break;
		case 3:
			orderStatusContent = '已退款';
			class2 = 'state1';
			break;
		default:
			class2 = '';
			orderStatusContent = '';
	}
	item.helpTypeContent = helpTypeContent;
	item.class1 = class1;
	item.orderStatusContent = orderStatusContent;
	item.class2 = class2;
	return item;
};
onReachBottom(() => {
	if (list.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getList(orderType.value);
	}
});

// tab切换
const tabId = ref(0);
const changeTab = (num) => {
	tabId.value = num;
	initList();
};
</script>

<style scoped lang="scss">
.tab {
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 26rpx;
	background-color: #fff;
	.tabItem {
		// width: 120rpx;
		text-align: center;
		color: #656565;
	}
	.avtive {
		position: relative;
		color: #000;
		font-weight: 700;
		font-size: 30rpx;
	}
	.avtive::after {
		position: absolute;
		bottom: 0;
		left: 50%;
		display: block;
		content: '';
		width: 45rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background: #179bf1;
		transform: translateX(-60%);
	}
}
.order {
	.orderList {
		.orderItem {
			font-size: 26rpx;
			.itemTop {
				justify-content: space-between;
				align-items: center;
				.topL {
					.state {
						margin-right: 15rpx;
						padding: 5rpx 15rpx;
						font-size: 24rpx;
						border-radius: 8rpx;
					}
				}
			}
			.itemCon {
				font-size: 28rpx;
				font-weight: 700;
				color: #555;
			}
			.itemBot {
				justify-content: flex-end;
				align-items: center;
				.but {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 25rpx;
					background: linear-gradient(45deg, #00a3f5, #00c9fd);
					color: #fff;
					font-size: 26rpx;
				}
			}
		}
	}
}
.state0 {
	color: #1b9aee;
}
.state1 {
	color: #f3742f;
}
.state2 {
	color: #75c550;
}
.state3 {
	color: #fdb321;
}
.state4 {
	color: #a8a8a8;
}
.tab1 {
	color: #eef3ff;
	background: #4f77e0;
}
.tab2 {
	background: #ffefed;
	color: #e0604f;
}
.tab3 {
	color: #00cc36;
	background: #e0f7e2;
}
.tab4 {
	color: #f39f4b;
	background: #fff6ed;
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.card {
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx -2rpx rgba(146, 141, 168, 0.12);
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	line-height: 90rpx;
	color: #999;
	text-align: center;
	background-color: #f7f7f7;
}
</style>
